<template>
  <div class="headbar" :class="{'draggable': !isFullScreen}">
    <div class="left" @click="clickLogoHandler">
      <img src="../../assets/images/public/logo.svg">
    </div>
    <div class="middle"></div>
    <div class="right control-btns">
      <span class="control-btns-item" :title="isFullScreen ? '还原' : '全屏'" @click="fullScreenHandler">
        <i class="fa" :class="isFullScreen ? 'fa-compress':'fa-expand'"></i>
      </span>
      <span class="control-btns-item" title="最小化" @click="minimizeHandler">
        <i class="fa fa-minus"></i>
      </span>
      <span class="control-btns-item" title="关闭" @click="closeHandler">
        <i class="fa fa-times"></i>
      </span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
const {ipcRenderer} = window.require('electron')

export default {
  name: 'headbar',
  data() {
    return {}
  },
  computed: {
    ...mapState({
      isFullScreen: 'isFullScreen'
    })
  },
  methods:{
    ...mapMutations({
      isFullScreenSetter: 'isFullScreenSetter'
    }),
    // LOGO被点击
    clickLogoHandler () {
      this.$router.push({name: 'home'})
    },
    // 全屏
    fullScreenHandler () {
      let eventType = this.isFullScreen ? 'restore' : 'fullscreen'
      ipcRenderer.send('updateWindowStatus', {eventType})
      this.isFullScreenSetter(!this.isFullScreen)
    },
    // 最小化
    minimizeHandler () {
      ipcRenderer.send('updateWindowStatus', {eventType: 'minimize'})
    },
    // 关闭
    closeHandler () {
      ipcRenderer.send('updateWindowStatus', {eventType: 'close'})
    }
  },
  mounted () {
    // 监听任务栏关闭
    ipcRenderer.on('close-window-render', this.closeHandler)
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.headbar {
  height: 60px;
  padding: 10px 15px;
  display: flex;
  user-select: none;
  &.draggable {
    -webkit-app-region: drag;
  }
  .left {
    -webkit-app-region: no-drag;
    img {
      display: block;
      height: 40px;
    }
  }
  .middle {
    flex-grow: 1;
  }
  .right {
    -webkit-app-region: no-drag;
    .control-btns-item {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin-left: 5px;
      color: @colorPrimary;
      cursor: pointer;
      text-align: center;
      .fa {
        font-size: 20px;
        line-height: inherit;
      }
    }
  }
}
</style>
